<template>
  <view class="posts-item-container">
    <!-- 帖子用户信息面板 -->
    <view class="top-info-wappar">
      <!-- 头像 -->
      <view class="left-poster-avatar" @click="onNavigator">
        <image class="avatar-pic" :src="post.user_avatar"></image>
      </view>
      <!-- 用户信息 -->
      <view @click="onNavigator" class="follow-poster-info">
        <view class="poster-name">
          {{ post.user_name }}
        </view>
        <view class="pub-info">
          {{post.pub_time}} · {{post.views_count}}人看过
        </view>
      </view>
      <!-- 热度 -->
      <view class="post-hot-icon">
        &#xe609; {{post.hot_count}}
      </view>
      <view class="focus-btn" :style="{'background-color': isFocus ? '#B7B7B7': '#000'}" @click="onClickFocus"
        v-if="page === 'index'">
        {{isFocus ? '已关注' : '关注'}}
      </view>
      <!-- 编辑 -->
      <view class="right-edit-btn" @click="onClickEditHandler" v-if="page === 'my'">
        &#xe604;
      </view>
      <!-- 举报 -->
      <navigator url="/thirdpkg/post-report/post-report" hover-class="none" class="right-edit-btn" v-else>
        &#xe611;
      </navigator>
    </view>
    <!-- 帖子前台信息 -->
    <view class="main-post-face" v-if="isOfficialLinkUser===false">
      <navigator :url="'/thirdpkg/post-detail/post-detail?postType=' + postType" class="face-text-hd">
        <text class="finish" v-if="isFinished">（已结束）</text>
        <text>{{post.post_title}}</text>
        <text class="link-official" v-if="isUserLinkOfficial">@投稿号</text>
      </navigator>
      <view class="face-img-bd" v-if="post.post_cover">
        <image hover-class="none" class="img" :style="{width: imgDirection === 'horizontal' ? '100%' : '240rpx'}"
          :src="post.post_cover" :mode="imgDirection === 'horizontal' ? 'aspectFill' : 'widthFix'"
          @click.stop="onPreviewClick(post.post_cover)"></image>
      </view>
    </view>
    <view class="main-post-face" v-else>
      <view class="bylink-post">
        <navigator :url="'/thirdpkg/post-detail/post-detail?postType=' + postType" class="face-text-hd">
          <view class="link-user" style="margin-bottom: 20rpx;">
            @暗裔 亚托克斯
          </view>
          <text class="finish" v-if="isFinished">（已结束）</text>
          <text>{{post.post_title}}</text>
        </navigator>
        <view class="face-img-bd" v-if="post.post_cover">
          <image hover-class="none" class="img" :style="{width: imgDirection === 'horizontal' ? '100%' : '240rpx'}"
            :src="post.post_cover" mode="aspectFit" :mode="imgDirection === 'horizontal' ? 'aspectFill' : 'widthFix'"
            @click.stop="onPreviewClick(post.post_cover)"></image>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    name: "posts-item",
    props: {
      post: {
        type: Object,
        default: {}
      },
      // 帖子显示方式：在个人主页显示：my，首页显示：index，他人主页显示：user
      page: {
        type: String,
        default: "my",
      },
      // 帖子类型
      postType: {
        type: String,
        default: '帖子'
      },
      officialLinkUser: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        imgDirection: 'horizontal',
        isFocus: false,
        isFinished: true, // 是否结束
        isUserLinkOfficial: false, // 普通用户是否通过 @投稿号 发布
        isOfficialLinkUser: this.officialLinkUser // 投稿号是否通过 @普通用户 发布
      };
    },
    beforeMount() {
      uni.getImageInfo({
        src: this.post.post_cover,
        success: ({
          width,
          height
        }) => {
          if (width > height) {
            this.imgDirection = 'horizontal'
          } else {
            this.imgDirection = 'vertical'
          }
        }
      })
    },
    methods: {
      onClickEditHandler() {
        this.$emit("edit-handler")
      },
      // 预览图片
      onPreviewClick: function(url) {
        uni.previewImage({
          urls: [url]
        })
      },
      // 关注用户
      onClickFocus: function() {
        if (this.isFocus) {
          this.isFocus = false
          this.$emit('focus-handler', this.isFocus)
        } else {
          this.isFocus = true
          this.$emit('focus-handler', this.isFocus)
        }
      },
      onNavigator: function() {
        const routes = getCurrentPages()
        const curRoute = routes[routes.length - 1].route
        if (curRoute === "pages/my/my" || curRoute === "subpkg/user-page/user-page") {
          return
        } else {
          uni.navigateTo({
            url: "/subpkg/user-page/user-page?userType=user"
          })
        }
      }
    }

  }
</script>

<style lang="scss">
  .posts-item-container {
    box-sizing: border-box;
    font-size: 28rpx;

    .top-info-wappar {
      font-family: 'iconfont';
      position: relative;
      display: flex;
      align-items: center;
      height: 80rpx;

      .left-poster-avatar {
        .avatar-pic {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .follow-poster-info {
        padding-left: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .poster-name {}

        .pub-info {
          font-size: 24rpx;
          color: #0191FF;
        }
      }

      .post-hot-icon {
        height: 100%;
        flex-direction: column;
        justify-content: flex-end;
        display: flex;
        margin-left: 20rpx;
      }

      .focus-btn {
        width: 100rpx;
        height: 66rpx;
        background-color: #000;
        border-radius: 45rpx;
        color: #FFF;
        text-align: center;
        line-height: 66rpx;
        margin-left: 55rpx;
      }

      .right-edit-btn {
        position: absolute;
        right: -16rpx;
        font-size: 32rpx;
        line-height: 32rpx;
      }
    }

    .main-post-face {
      margin-top: 10rpx;

      .face-text-hd {

        .finish,
        .link-official,
        .link-user {
          color: #0091FF;
        }
      }

      .face-img-bd {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 400rpx;
        margin-top: 10rpx;

        .img {
          overflow: hidden;
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
        }
      }

      .bylink-post {
        padding: 20rpx;
        background-color: #F3F3F3;
        border-radius: 12rpx;
      }
    }
  }
</style>